<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>天天美印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<link type="text/css" rel="stylesheet" href="common.css" />	
	<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
	<style type="text/css">
		ul,li{
			padding:0;
			margin:0;
			list-style: none;
		}
		body{
			/*background:#f2f2f2;*/
		}

		/*main css*/
		#main{
			width:100%;
		}
		ul{
			
		}
		ul li{
			border-bottom:1px solid #c9cacb;
			padding:0 12px 5px;
			font-size:0;
		}
		ul li:last-child{
			border-bottom:none;
		}
		ul li div:first-child{
			padding:10px 0;
			color:#000;
			font-size:1.6rem;
		}
		ul li div img{
			width:32%;
			display: inline-block;
			margin-left:2%;
			margin-bottom:7px;
		}
		ul li div img:nth-of-type(3n+1){
			margin-left:0;
		}
	</style>
</head>
<body>
	<!-- <div id="header">
		<div class="topbar">
			<span></span>
		</div>
	</div> -->
	<div id="main">
		<ul>
			<!-- <li>
				<div>20150910</div>
				<div>
					<img src="headImg.png" />
					
				</div>
			</li> -->
		</ul>
	</div>
	<div id="footer">
		
	</div>
</body>
<script type="text/javascript">
    

	$(document).ready(function(){
		// $("ul li:after").css("margin-top",$("ul li img").height());
		$("ul li div img").css("height",$("ul li div img").width());
                      
                      loadimg();

		  
	})
    
    
    function loadimg(){
        dirid = api.getConfig("cloudFolderid");
        
        $.ajax({
               url:"http://ttmy.len.so/app/user/getyunphoto/dir_id/"+dirid,
               type:'get',
               dataType:'JSONP',
               //jsonp:"callback",
               success: function(data){
               //alert(JSON.stringify(data));
               console.log(data);
               $("ul").html('');
               if(data.status==1){
                for(var i in data.info){
                    var list = data.info[i];
                    var listli='<li class="item" dirid="'+list.id+'">'+
                        '<div>'+list.date+'</div><div>';
                    for (var j in list.pics) {
                        var img = list.pics[j];
                        var width = $("ul li div img").width();
                        //七牛图片查看地址+?imageView2/1/w/<Width>
                        listli+='<img src="http://7xqkvn.com1.z0.glb.clouddn.com/'+img+'?imageView2/1/w/200" />';
                    };
                    listli+='</div></li>';
                    $("ul").append(listli);
                }
               
               
               }
               
               }
        })
    }

 	function bindEvent () {
	  	var mc = new Hammer.Manager(document.body);
	    mc.add(new Hammer.Tap());
	    
	    mc.on("tap", function (e) {
	    	
	        var className=$(e.target).attr("class");

	        // if(e.target.id=="btn-login"){
	        // 	window.location.href=$(e.target).attr("data")+".html";
	        // }

	    });
	}
	bindEvent();
</script>
</html>